<template>
 <div>
  <el-card class="card">
    <!-- 头部布局 -->
     <el-row class="header" type="flex" align="middle" :gutter="30">
     <el-col :span="21">
        <span class="name">学科名称</span>
      <el-input class="input" v-model="subjectName"></el-input>
      <el-button size="small" @click="subjectName=''">清除</el-button>
      <el-button size="small" type="primary" @click="searchFn">搜索</el-button>
     </el-col>
     <el-col :span="3">
        <el-button size="small" type="success" icon="el-icon-edit" @click="addFn" style="float:right">新增学科</el-button>
     </el-col>
     </el-row>

        <!-- 数据记录 -->
      <el-alert
        v-if="countsFn"
        :title="countsFn"
        type="info"
        class="alert"
        :closable="false"
        show-icon>
      </el-alert>

      <!-- 表格铺设 -->
     <el-table
      :data="list"
      style="width: 100%"
      >
       <el-table-column
       align='center'
          type='index'
          label="序号"
          width="80"
         >
        </el-table-column>
         <el-table-column
         align='center'
          prop="subjectName"
          label="学科名称"
          width="150"
         >
        </el-table-column>
          <el-table-column
          align='center'
          prop="username"
          label="创建者"
          width="120"
         >
        </el-table-column>
        <el-table-column
        align='center'
          prop="addDate"
          label="创建日期"
          width="200"
         >
        <template slot-scope="scope">
          {{formatDate(scope.row.addDate)}}
        </template>
         </el-table-column>
        <el-table-column
        align='center'
          prop="isFrontDisplay"
          label="前台是否显示"
          width="120"
         >
         <template slot-scope="scope">
          {{formatShow(scope.row.isFrontDisplay)}}
         </template>
         </el-table-column>
        <el-table-column
        align='center'
          prop="twoLevelDirectory"
          label="二级目录"
          width="100"
         >
         </el-table-column>
        <el-table-column
        align='center'
          prop="tags"
          label="标签"
          width="100"
         >
         </el-table-column>
         <el-table-column
         align='center'
          prop="totals"
          label="题目数量"
          width="100"
         >
        </el-table-column>
        <el-table-column
        align='center'
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
             type="text"
             size="small"
             @click="$router.push(`/subjects/directorys?id=${scope.row.id}&name=${scope.row.subjectName}`)">
            学科分类
            </el-button>
            <el-button
             type="text"
             size="small"
             @click="$router.push(`/subjects/tags??id=${scope.row.id}&name=${scope.row.subjectName}`)">
            学科标签
            </el-button>
             <el-button
             type="text"
             size="small"
             @click="editFn(scope.row)"
             >
            修改
            </el-button>
             <el-button
             type="text"
             size="small"
             @click="delFn(scope.row)">
            删除
            </el-button>
          </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row type="flex" justify="end" style="margin-top:20px">
       <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2,5,10, 20, 30, 40]"
        :page-size.sync="params.pagesize"
        layout="prev, pager, next ,sizes,jumper"
        :total="counts">
    </el-pagination>
    </el-row>
  </el-card>
  <!-- 弹层 -->
   <el-dialog
     :title="isEdit ? '修改学科' : '新增学科'"
    :visible.sync="showDialog"
    width="400px">
      <subject
      @closeDialog='showDialog=false'
      :isEdit='isEdit'
      :row='row'
      v-if="showDialog"
       @update='updateFn'>
       </subject>
    </el-dialog>
 </div>
</template>

<script>
import Subject from '../components/subjects-add'
import { parseTime } from '@/utils'
import { list as listAPI, remove as removeAPI } from '@/api/hmmm/subjects'
export default {
  components: {
    Subject
  },
  data () {
    return {
      row: {},
      name: '',
      isEdit: false, // 是否是编辑
      showDialog: false, // 新增学科弹层
      subjectName: '',
      list: [], // 学科列表
      counts: 0,
      params: {
        page: 1,
        pagesize: 10
      }

    }
  },
  watch: {
    subjectName (newValue) {
      // 如果搜索框没值，请求第一页数据
      if (!newValue) {
        this.params.page = 1
        this.getList(this.params)
      }
    }
  },
  mounted () {
    this.getList(this.params)
  },
  computed: {
    // 当前数据多少条
    countsFn () {
      return `数据一共 ${this.counts} 条`
    }
  },
  methods: {
    // 转换时间
    formatDate (date) {
      return parseTime(date)
    },
    // 转换前台是否显示
    formatShow (show) {
      return show === 0 ? '否' : '是'
    },
    // 选择一页显示几条数据
    handleSizeChange (val) {
      this.params.pagesize = val
      // 如果输入框有值，加载当前输入框的列表
      if (this.subjectName) {
        this.getList({
          ...this.params,
          subjectName: this.subjectName
        })
      } else {
        // 输入框没值，加载所有列表
        this.getList(this.params)
      }
      console.log(`每页 ${val} 条`)
    },
    // 点击页码,获取对应数据
    handleCurrentChange (val) {
      this.params.page = val
      // 如果输入框有值，加载当前输入框的列表
      if (this.subjectName) {
        this.getList({
          ...this.params,
          subjectName: this.subjectName
        })
      } else {
        // 输入框没值，加载所有列表
        this.getList(this.params)
      }
      console.log(`当前页: ${val}`)
    },
    // 更新页面
    updateFn () {
      this.getList({
        subjectName: this.subjectName,
        ...this.params
      })
    },
    // 搜索
    searchFn () {
    // 重新调用接口，根据学科名字筛选
    // 每次搜索默认从第一页开始搜索
      this.params.page = 1
      this.getList({
        subjectName: this.subjectName,
        ...this.params
      })
    },
    // 点击添加
    addFn () {
      this.isEdit = false
      this.showDialog = true
    },

    // 删除功能
    delFn (row) {
      console.log(1)
      console.log(row)
      // 确认是否要删除
      this.$confirm('你确定要删除吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          // 1.调取接口
          const res = await removeAPI(row)
          console.log('删除学科', res)

          // 2.提示删除成功
          this.$message.success('删除成功')
          // 3.当前数据剩一条数据，再做删除，将页码减1
          if (this.list.length === 1) this.params.page--
          if (!this.params.page) this.params.page = 1

          // 4.更新列表
          // this.params.page=
          this.getList({
            subjectName: this.subjectName,
            ...this.params
          })
        } catch (err) {
          this.$message.error(err.message)
        }
      }).catch(() => {
        this.$message('取消删除')
      })
    },

    // 点击修改
    async editFn (row) {
      this.isEdit = true
      this.showDialog = true
      this.row = row
    },

    // 获取学科列表
    async getList (t) {
      try {
        // 1.调用接口，获取数据
        const res = await listAPI(t)
        console.log('获取到的学科列表', res)
        // 2.将数据赋给list，铺设到页面
        this.list = res.data.items
        this.counts = res.data.counts
      } catch (err) {
        this.$message.error(err.message)
      }
    }
  }

}
</script>
<style lang="scss">
.el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
}
.input{
  width:200px;
  margin: 0 20px;
}

</style>

<style scoped lang='scss'>
.card {
  margin: 10px;
}
.header{
  // margin-bottom: 20px;
  font-size: 14px;
  height: 10px;

.name{
  font-weight: 700;
  color: #606266;
}
}
.alert {
  margin: 30px 0px 20px;
 }

</style>
